<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #pp {
        margin: 0 auto;
        padding: 20px;
        font-size: 32px;
        line-height: 64px;
        background: purple;
        color: white;
      }

      .para2 {
        background: lightgreen;
        font-size: 3em;
        padding: 12px 8px;
      }

      .para3 {
        background: rgb(172, 172, 172);
        font-size: 3em;
        padding: 12px 8px;
      }

      .shadow3 {
        box-shadow: 4px 2px 8px rgb(51, 51, 51);
      }

      .para4 {
        background: lightgreen;
        font-size: 3em;
        padding: 12px 8px;
      }

      .anotherClass {
        width: 50%;
        background: coral;
        font-size: 3em;
        padding: 30px 14px;
        border-radius: 25px;
      }
    </style>
  </head>

  <body>
    <h3 id="demo" style="color: blue">你好</h3>
    <button onclick="change()">改变颜色</button>
    <h3 id="demo2">你不好</h3>
    <button onclick="document.getElementById('demo2').style.color='blue'">
      改变颜色2
    </button>
    <h3>当前第一行字的颜色:</h3>
    <h3 id="m1"></h3>
    <button onclick="getColor()">获取颜色</button>
    <div>单击按钮以返回元素的字体大小，行高，填充和背景颜色属性的值:</div>
    <br />
    <button onclick="myFunc()">点我试试</button>
    <p id="pp"></p>
    <p id="para"></p>

    <p>点击按钮，将" para"类添加到P元素:</p>

    <button onclick="myFunc2()">Add class</button>

    <p id="x">这是一个段落</p>
    <p>点击按钮，将" para"和" shadow"类添加到P元素:</p>

    <button onclick="myFunc3()">Add classes</button>

    <p id="y">这是第二个段落</p>
    <p>单击按钮以从P元素中删除" para"类:</p>

    <button onclick="myFunc4()">删除class</button>

    <p>单击按钮可在两个类别之间切换:</p>

    <button onclick="myFunc5()">Toggle</button>

    <p id="z" class="para4">这是一个段落</p>
    <script>
      //改变元素内联样式
      var y = "red";
      var f = false;

      function change2() {
        if (f == true) {
          y = "red";
        } else {
          y = "blue";
        }
        document.getElementById("demo").style.color = y;
      }

      function change() {
        f = !f;
        change2();
      }
      //也可以直接改

      //获取样式信息
      function getColor() {
        var x = document.getElementById("demo").style.color;
        document.getElementById("m1").innerHTML = x;
      }

      function myFunc() {
        let para = document.querySelector("#pp");
        let compStyles = window.getComputedStyle(para);

        para.innerHTML =
          "font-size: " + compStyles.getPropertyValue("font-size");
        para.innerHTML +=
          "<br>line-height: " + compStyles.getPropertyValue("line-height");
        para.innerHTML +=
          "<br>padding: " + compStyles.getPropertyValue("padding");
        para.innerHTML +=
          "<br>background-color: " +
          compStyles.getPropertyValue("background-color");
      }

      //将CSS类添加到元素
      function myFunc2() {
        document.getElementById("x").className = "para2";
      }

      //将多个类添加到p元素

      function myFunc3() {
        var elem = document.getElementById("y");
        elem.classList.add("para3", "shadow3");
      }

      //从p元素中删除一个类
      function myFunc4() {
        var elem = document.getElementById("y");
        elem.classList.remove("para3");
      }

      //两个类中切换
      function myFunc5() {
        var elem = document.getElementById("z");
        elem.classList.toggle("anotherClass");
      }

      //切换一个类打开创建侧面导航按钮
      //具体看42.5
    </script>
  </body>
</html>
